<template>
  <div class="history-container">
    <h2>历史上色记录</h2>
    <el-empty v-if="!historyList.length" description="暂无历史记录" />
    
    <div v-else class="history-grid">
      <el-card v-for="item in historyList" :key="item.id" class="history-card">
        <div class="card-title">
          {{ formatDate(item.date) }}
        </div>
        <div class="image-comparison">
          <div class="image-container">
            <div class="image-label">原图</div>
            <img :src="item.originalImage" class="history-image" alt="原始图片" />
          </div>
          <div class="image-container">
            <div class="image-label">上色结果</div>
            <img :src="item.colorizedImage" class="history-image" alt="上色结果" />
          </div>
        </div>
        <div class="card-actions">
          <el-button type="primary" size="small" @click="downloadImage(item.colorizedImage, `colorized_${item.id}.jpg`)">
            下载结果
          </el-button>
          <el-button type="danger" size="small" @click="deleteHistoryItem(item.id)">
            删除记录
          </el-button>
        </div>
      </el-card>
    </div>
    
    <div v-if="historyList.length > 0" class="clear-all">
      <el-button type="danger" @click="clearHistory">清空所有记录</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface HistoryItem {
  id: string;
  originalImage: string;
  colorizedImage: string;
  date: string;
}

const historyList = ref<HistoryItem[]>([])

// 加载历史记录
onMounted(() => {
  loadHistory()
})

const loadHistory = () => {
  try {
    const historyData = localStorage.getItem('colorizeHistory')
    if (historyData) {
      historyList.value = JSON.parse(historyData)
    }
  } catch (error) {
    console.error('加载历史记录失败:', error)
    ElMessage.error('加载历史记录失败')
  }
}

// 下载图片
const downloadImage = (imageUrl: string, fileName: string) => {
  const link = document.createElement('a')
  link.href = imageUrl
  link.download = fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

// 删除单条记录
const deleteHistoryItem = (id: string) => {
  ElMessageBox.confirm('确定要删除这条记录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const history = JSON.parse(localStorage.getItem('colorizeHistory') || '[]')
    const filteredHistory = history.filter((item: HistoryItem) => item.id !== id)
    localStorage.setItem('colorizeHistory', JSON.stringify(filteredHistory))
    historyList.value = filteredHistory
    ElMessage.success('删除成功')
  }).catch(() => {
    // 取消删除
  })
}

// 清空所有记录
const clearHistory = () => {
  ElMessageBox.confirm('确定要清空所有历史记录吗？此操作不可恢复！', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('colorizeHistory')
    historyList.value = []
    ElMessage.success('已清空所有历史记录')
  }).catch(() => {
    // 取消操作
  })
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.history-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
}

.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
}

.history-card {
  margin-bottom: 20px;
}

.card-title {
  margin-bottom: 10px;
  color: #666;
  font-size: 14px;
}

.image-comparison {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.image-container {
  flex: 1;
  text-align: center;
}

.image-label {
  margin-bottom: 5px;
  font-weight: bold;
}

.history-image {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 4px;
}

.card-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.clear-all {
  margin-top: 30px;
  text-align: center;
}

@media (max-width: 768px) {
  .history-grid {
    grid-template-columns: 1fr;
  }
  
  .image-comparison {
    flex-direction: column;
  }
}
</style>